<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
    <head>

          <style>
                h2,h3 {text-align: center;}
                table {border: 2px grey outset; padding: 0px;
                      margin-left: auto; margin-right: auto;
                }

                th { font-size:2m; font-weight: bold;}
                th,td {  border: 1px solid; padding: 20px;}

          </style>

          <script type="text/javascript" >
                  var answer = new Array();
                  var startTime; 
                  
                function getTable() {
                      var t = document.getElementById("table");
                      var row = document.getElementById("row").value;
                      var column = document.getElementById("column").value;
                      var max = document.getElementById("max").value;

                      document.getElementById("table_title").innerHTML = "Row: "+row+" Column: "+column;
                      var body = "";
                      for(var i=0; i<row; i++)
                      {
                            body += "<tr>";
                            for(var j=0; j<column; j++)
                                {
                                      var number1 = Math.round( max * Math.random() );
                                      var number2 = Math.round( max *Math.random() );

                                   answer [i*column+j] = number1 + number2;
                                      var n = i*column + j;
                                      var id = new String(n);
                                      id = 't' + id ;  
                                  body += "<td id=" +'"'+ id +'"' +">" + "&nbsp "+ number1 + "<br/>+"+ number2 + "<hr/>" + "&nbsp";
                                  body += "<input type=\"text\"  id=" + '"' + "i_"+ id +'"' + ' style="background-color:gray" ' + " size=5 maxlength=3 "+ "/>"
                                  body +=  "</td>";
//                                 alert(id);
                                 }
                            body += "</tr>";
                      }
                      t.innerHTML = body;

                }
				function start()
				{
					startTime = new Date().getTime(); 
					alert("started at " + startTime); 
				}
                function checkResult()
                {
                    var t = document.getElementById("table");
                    var row = document.getElementById("row").value;
                    var column = document.getElementById("column").value;
                    var correct_number = 0;
                    var index = 0;
                    var id; 
                    
                    for(var i=0; i<row; i++)
                    {
                        for(var j=0; j<column; j++)
                        {                           
                            index = i*column + j;
                            id = "i_"+"t"+index;   
                             
                            if ( document.getElementById(id).value.valueOf() == answer[index]) 
                            	{
                            		document.getElementById(id).style.backgroundColor = "green"; 
//                            	    alert(document.getElementById(id).value.valueOf() + "   " +answer[index] );   
									correct_number++; 
                            	}else{
                            		document.getElementById(id).style.backgroundColor = "red";		
                            	}
                    		 
                           //alert( "Your answer:  "+ document.getElementById(id).value  + "correct answer: " + answer[index]);
                         }
                    }
                    
                    alert( "Your score: " + correct_number + "/" + row*column + 
                    		"\n Finished in  " + (new Date().getTime()/1000-startTime/1000) + "seconds" );
                      
                }

          </script>
          <title>  Math work table </title>
    </head>


    <body>

          <h2> Math workout table </h2>
          <h3 id="table_title"> </h3>
          
          <br/>
          Table row:
                <select id="row">
                      <option  value="4">4 </option>
                      <option  value="1">1 </option>
                      <option  value="2">2 </option>
                      <option  value="3">3 </option>
                      <option  value="4">4 </option>
                      <option  value="5">5 </option>
                      <option  value="6">6 </option>
                      <option  value="7">7 </option>
                      <option  value="8">8 </option>
                      <option  value="9">9 </option>
                      <option  value="10">10 </option>
                </select>
                <br/>

            Table column:
                <select id="column">
                      <option  value="5">5 </option>
                      <option  value="1">1 </option>
                      <option  value="2">2 </option>
                      <option  value="3">3 </option>
                      <option  value="4">4 </option>
                      <option  value="5">5 </option>
                      <option  value="6">6 </option>
                      <option  value="7">7 </option>
                      <option  value="8">8 </option>
                      <option  value="9">9 </option>
                      <option  value="10">10 </option>
                </select>
                <br/>

            Max number:
                <select id="max">
                      <option  value="10">10 </option>
                      <option  value="5">5 </option>
                      <option  value="20">20 </option>
                      <option  value="100">100 </option>
                      <option  value="1000">1000 </option>
                      <option  value="10000">10000 </option>
                </select>
                <br/>

          <button type="button" onclick="getTable()">Generate Math Table!</button>
       <p/>
       <center>
       <button type="button" onclick="start()"> Start</button>
       <button type="button" onclick="checkResult()"> Stop</button>
       </center>
       <p/>
       <table id="table" > </table>
       
       
</body>

</html>
